@import "@site/styles/index";

.file-picker-page {
  .file-picker {
    &-wrapper {
      display: flex;
      flex-wrap: wrap;
      padding: r(15) 0 0 r(15);
    }

    &-item,
    &-btn {
      width: r(74);
      height: r(74);
      margin-bottom: r(15);
    }

    &-item {
      display: inline-block;
      border: r(2) solid #ddd;
      margin-right: r(15);

      &-img {
        width: 100%;
        height: 100%;
        overflow: hidden;

        img {
          max-width: 100%;
          height: auto;
        }
      }
    }

    &-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      border: r(2) dashed #ddd;

      .za-icon {
        color: #ddd;
      }
    }

    &-closebtn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: r(16);
      height: r(16);
      cursor: pointer;

      .za-icon {
        font-size: r(10);
      }
    }
  }
}
